<template>
  <div class="add_production_box">
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      :title="isedit ? '编辑' + title : '添加' + title"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="show"
      width="750px"
    >
      <el-form
        class="tab_form"
        label-position="right"
        :model="form"
        :rules="formRules"
        ref="formRef"
        size="mini"
        label-width="auto"
      >
        <el-row :gutter="16" type="flex">
          <el-col :span="12">
            <el-form-item label="Token:" prop="token">
              <el-input v-model="form.token" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称:" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="品牌:" prop="brand">
              <el-input v-model="form.brand" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="模式:" prop="model">
              <el-input
                v-model="form.model"
                placeholder="请输入"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="IP:" prop="ip">
              <!-- <el-input v-model="form.ip" placeholder="请输入"></el-input> -->
              <IpAdress
                @setDefaultVal="setDefaultVal"
                v-model="form.ip"
              ></IpAdress> </el-form-item
          ></el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="图像:" prop="imageUrl">
              <div style="width: 100%" class="flex-x">
                <AppUpload
                  tips=""
                  :is-resolution="true"
                  :width="720"
                  :height="294"
                  @subUploadSucceed="handleUploadSucceed"
                />
                <div
                  class="imageHome"
                  style="margin-left: 10px"
                  v-if="form.imageUrl"
                >
                  <img
                    :src="form.imageUrl | filtersFileUrl()"
                    class="image-size"
                  />
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
        <el-button
          v-if="isedit"
          size="mini"
          type="primary"
          :loading="btnLoading"
          @click="submitForm('formRef')"
          >确 定</el-button
        >
        <el-button
          :loading="btnLoading"
          v-else
          :key="isedit"
          size="mini"
          type="primary"
          @click="submitForm('formRef')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { createForm, updateForm } from "@/api/loudspeakerBox";
import IpAdress from "@/components/IpAdress/index.vue";
import AppUpload from "../../devicegroups/UploadImage.vue";
export default {
  components: {
    AppUpload,
    IpAdress,
  },

  props: {
    show: {
      type: Boolean,
      default: true,
    },
    isedit: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "音箱",
    },
    token: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      btnLoading: false,
      form: {
        name: "",
        brand: "",
        model: "",
        imageUrl: "",
        ip: "",
        token: "",
      },
      formRules: {
        token: [{ required: true, message: "请输入token" }],
        name: [{ required: true, message: "请输入名称" }],
        brand: [{ required: true, message: "请输入品牌" }],
        model: [{ required: true, message: "请输入模式" }],
        ip: [{ required: true, message: "IP格式不正确" }],
      },
    };
  },
  methods: {
    handleUploadSucceed(url) {
      this.form.imageUrl = "";
      setTimeout(() => {
        this.form.imageUrl = url;
      }, 500);
    },
    //弹窗打开执行操作
    handleOpen() {
      this.$nextTick(() => {
        if (this.isedit) {
          //   this.getEditData();
        }
      });
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      this.$emit("closeDialog", isRefresh);
      this.cancelEmpty();

      this.$emit("update:show", false);
    },
    //取消清空数据
    cancelEmpty() {
      this.form = {
        name: "",
        brand: "",
        model: "",
        imageUrl: "",
        ip: "",
        token: "",
      };
      this.$refs["formRef"].resetFields();
    },
    setDefaultVal() {
      // if (!this.form.ip) {
      //   this.$refs["formRef"].validateField("ip");
      // } else {
      //   this.$refs["formRef"].clearValidate("ip");
      // }
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.btnLoading = true;
          try {
            if (this.isedit) {
              await updateForm(this.form, this.form.oldToken);
              this.$emit("closeDialog", this.form.token);
              this.cancelEmpty();
              this.$emit("update:show", false);
            } else {
              await createForm(this.form);
              this.handleClose(true);
            }
            this.$msg({
              message: "操作成功",
              type: "success",
            });
            this.btnLoading = false;
            console.log("1111 :>> ", 1111);
          } catch (error) {
            this.btnLoading = false;
          }
        } else {
          this.$msg("数据校验失败,请检查!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.imageHome {
  padding: 5px 5px 5px 5px;
  width: 104px;
  height: 104px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
  opacity: 1;
  border-radius: 2px;
  .image-size {
    width: 94px;
    height: 94px;
    /*background: #2E2E2E;*/
    border-radius: 50%;
    opacity: 1;
    display: flex;
  }
}
.tab_form {
  /* margin-right: 15px; */
  /deep/ .el-row--flex {
    flex-wrap: wrap;
  }
}
</style>
